import React from 'react'
import './index.css'

export default function Footer({todos, selectAllTodos, clearCompleteTodos}) {

  // 总数量
  const totalSize = todos.length
  // 完成的数量
  const completeSize = todos.reduce((pre, todo) => pre + (todo.complete?1:0), 0)
  // 是否全部完成
  const isAllComplete = totalSize>0 && totalSize===completeSize

  const clickClear = () => {
    if (window.confirm('确定清除吗?')) {
      clearCompleteTodos()
    }
  }

  return (
    <div className="todo-footer">
      <label>
        <input type="checkbox" checked={isAllComplete} onChange={(e) => selectAllTodos(e.target.checked)}/>
      </label>
      <span>
        <span>已完成{completeSize}</span> / 全部{totalSize}
      </span>
      {completeSize>0 && <button className="btn btn-danger" onClick={clickClear}>清除已完成任务</button>}
    </div>
  )
}
